<template>
	<!-- 资产领用 -->
	<view class="assetMain">

		<view class="tab-posi">
			<NewSegmentedControl :current="currentTab" :values="tabItems" style-type="text" active-color="#198a6c"
				@clickItem="onClickItem" />
		</view>

		<searchPopup :show="toShow" ref="toSearch" @clickFu="receive" />

		<view class="assetList">
			<view class="assetListItem" v-for="(item,index) in assetsList" :key="index">
				<view class="itemHead">

					<view class="itemHeadTitle">
						<view>{{item.applyUnitName?item.applyUnitName:'--'}}</view>
						<view class="applyNum" style="">申请编号:{{item.assetApplyNo}}</view>
					</view>
					<view class="itemHeadState">
						{{item.statusCh?item.statusCh:'未知'}}
					</view>
				</view>
				<view class="itemContent" @click="toDetail(item.assetApplyId)">
					<view class="conCenter">
						<template v-if="item.dtls">
							<view v-for="(i,index) in item.dtls">{{i.assetName?i.assetName:'未知'}}</view>
						</template>
					</view>
					<view>
						<template v-if="item.dtls">
							<view v-for="(i,index) in item.dtls">数量：{{i.applyQty}}</view>
						</template>
					</view>
					<view>
						<text class="iconfont">&#xe8d4;</text>
					</view>
				</view>
				<view class="itemHand">
					<view v-if="item.statusCh=='已作废'" @click="toDel(item.assetApplyId)" class="btn-s btn-black-s">删除申请
					</view>
					<template v-if="item.statusCh=='处理中'||item.statusCh=='待处理'">
						<view class="btn-s btn-green-s" @click="qrSign">扫码签收</view>
						<view class="btn-s btn-black-s" @click="toSign">签收</view>
					</template>

				</view>
			</view>
			<!-- 加载结束 -->
			<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		</view>

		<view class="bottom-btn">
			<view class="buttons">
				<view>
					<button class="button btn-green" @click="toApply">申请使用资产</button>
				</view>
				<view>
					<button class="button btn-green" @click="toSign">未签收列表</button>
				</view>
				<view>
					<button class="button btn-green" @click="toPut">实施列表</button>
				</view>
			</view>
		</view>

		<!-- 底部弹窗 -->
		<uni-popup ref="positionPopup" background-color="#fff">
			<view class="scroll">
				<view class="popup-content" v-for="(item,index) in positionList"
					@click="positionChange(item.id,index,item.storeName)">
					<text class="text">{{item.storeName}}</text>
				</view>
			</view>
		</uni-popup>
		<!-- <uni-popup ref="typePopup" background-color="#fff">
			<view class="popup-content" v-for="(item,index) in assetTypeOpts" @click="typeChange(index)"><text
					class="text">{{item.value}}</text></view>
		</uni-popup> -->
		<uni-popup ref="statusPopup" background-color="#fff">
			<view class="popup-content" v-for="(item,index) in assetStatusOpts" @click="statusChange(index)"><text
					class="text">{{item.value}}</text></view>
		</uni-popup>
		<MessageTip ref="messageTip" :tipContent="tipContent" @clickType="handleShowOrHideTip" />

	</view>
</template>

<script lang="ts">
	import {
		onPullDownRefresh,
		onReachBottom,
		onNavigationBarButtonTap
	} from "@dcloudio/uni-app";
	import {
		defineComponent,
		ref,
		reactive
	} from 'vue'
	import {
		applyList,
		delApply
	} from '@/common/api/assetAPI.ts'
	import {
		assetStatus,
		getPosition
	} from '@/common/api/comAPI.ts'
	import {
		CONSTANT
	} from '@/common/config/config.ts'
	import {
		fromSearch
	} from '@/common/util/tabSearchUse.ts'
	import searchPopup from '@/pages/searchPopup/index.vue'
	export default defineComponent({
		components: {
			searchPopup,
		},
		setup(props, {
			emit
		}) {
			const tipContent = ref('') //提示信息
			const messageTip = ref()
			const showLoadMore = ref(false);
			const loadMoreText = ref('加载中……'); //加载更多提示
			const assetsList = ref([]); //资产列表数据
			const currentTab = ref(0)
			const tabItems = ref(["全部", "位置", "状态"]);
			const assetStatusOpts = ref([]); // 状态数据
			const assetTypeOpts = ref([]); // 类型数据
			const statusPopup = ref(null); //状态弹出
			// const typePopup = ref(null); //类型弹出
			const onClickItem = (e: any) => {
				currentTab.value = e.currentIndex;
				console.log('e.currentIndex', e.currentIndex)
				if (e.currentIndex === 0) {
					tabItems.value = ["全部", "位置", "状态"];
					searchParams.value.status = null;
					searchParams.value.assetName = null;
					searchParams.value.applyUnits = null
					getList();
				} else if (e.currentIndex === 1) {
					positionPopup.value.open('bottom')
				} else if (e.currentIndex === 2) {
					statusPopup.value.open('bottom')
				}
			}

			const toSearch = ref(null)
			// 搜索了列表
			function receive(e: any) {
				console.log(e)
				searchParams.value.assetName = e
				assetsList.value = []
				getList();
			}
			const toShow = ref(1)
			// 点击了搜索
			onNavigationBarButtonTap(() => {
				// 弹出搜索
				toShow.value++
			})

			const page = ref(CONSTANT.initPage); //初始加载页码
			const allPages = ref(0); //总页码数
			onPullDownRefresh(() => {
				console.log("触发下拉");
				// uni.startPullDownRefresh(); //下拉开启
				page.value = CONSTANT.initPage; //重置页码
				assetsList.value = []; //重置列表
				getList();
			});
			onReachBottom(() => {
				//触发底部
				if (page.value > allPages.value || page.value == allPages.value) {
					loadMoreText.value = '没有更多的数据了'
					showLoadMore.value = true;
				} else {
					page.value++;
					loadMoreText.value = '加载中……';
					showLoadMore.value = true;
					getList();
				}

			})
			//获取列表数据
			const searchParams = ref({
				status: null,
				assetApplyType: 1,
				assetName: null,
				applyUnits: null
			}); //查询条件
			const matchRule = {
				status: 'eq',
				assetApplyType: 'eq',
				assetName: 'cn',
				applyUnits: 'eq'
			}; //匹配条件

			getList();
			getEmuns();
			getType();

			//----------------------------------------
			const positionList = ref([]); // 位置数据
			const positionPopup = ref(null); //位置弹出
			// 获取位置
			function getPos() {
				getPosition().then(value => {
					if (value.code == 0) {
						positionList.value = value.data.records
					} else {
						uni.showToast({
							title: value.message,
							icon: "none"
						});
					}
				})
			}
			getPos()
			// 位置改变
			function positionChange(id, index, storeName) {
				searchParams.value.applyUnits = id
				console.log(searchParams.value)
				tabItems.value[currentTab.value] = storeName
				positionPopup.value.close();
				//获取列表
				page.value = CONSTANT.initPage; //重置页码
				assetsList.value = []; //重置列表
				getList();
			}
			//----------------------------------------

			function getList() {
				let config = {
					page: page.value,
					rows: CONSTANT.pageSize,
					dtlRows: 3
				}
				const params = Object.assign(fromSearch(searchParams.value, matchRule), config)
				applyList(params).then((res: any) => {
					uni.stopPullDownRefresh(); //关闭下拉
					if (res.code === 0) {
						allPages.value = res.data.pages;
						page.value = res.data.current;
						let list: any[] = res.data.records;
						assetsList.value = assetsList.value.concat(list);
						if (assetsList.value.length === 0) {
							showLoadMore.value = true;
							loadMoreText.value = '暂无数据'
						} else if (assetsList.value.length < CONSTANT.pageSize) {
							showLoadMore.value = true;
							loadMoreText.value = '没有更多的数据了'
						} else {
							showLoadMore.value = false;
						}
					}

				})
			}

			//获取资产状态
			function getEmuns() {
				assetStatusOpts.value = [];
				assetStatus('ApplyStatus').then((res: any) => {
					// console.log(res)
					if (res.code === 0) {
						assetStatusOpts.value = res.data.ApplyStatus;
					}
				})
			}

			//获取资产类型
			function getType() {
				assetTypeOpts.value = [];
				assetStatus('AssetApplyType').then((res: any) => {
					// console.log(res)
					if (res.code === 0) {
						assetTypeOpts.value = res.data.AssetApplyType;
					}
				})
			}

			function statusChange(i: Number) {
				searchParams.value.status = assetStatusOpts.value[i].code;
				statusPopup.value.close();
				tabItems.value[currentTab.value] = assetStatusOpts.value[i].value;
				// console.log(tabItems.value)
				//获取列表
				page.value = CONSTANT.initPage; //重置页码
				assetsList.value = []; //重置列表
				getList();
			}

			// function typeChange(i: Number) {
			// 	searchParams.value.assetApplyType = assetTypeOpts.value[i].code;
			// 	typePopup.value.close();
			// 	tabItems.value[currentTab.value] = assetTypeOpts.value[i].value;
			// 	// console.log(tabItems.value)
			// 	//获取列表
			// 	page.value = CONSTANT.initPage; //重置页码
			// 	assetsList.value = []; //重置列表
			// 	getList();
			// }

			//识别资产
			function scan() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						//成功后跳转到资产详情
					}
				});
			}

			// 删除
			const delAssetApplyId = ref()
			const toDel = (assetApplyId) => {
				tipContent.value = '确认删除吗？'
				delAssetApplyId.value = assetApplyId
				messageTip.value.openTip()
			}
			const handleShowOrHideTip = (type: string) => {
				if (type == 'yes') {
					delApply(delAssetApplyId.value).then(value => {
						if (value.code == 0) {
							uni.showToast({
								title: value.message,
								icon: "none"
							});
						} else {
							uni.showToast({
								title: value.message,
								icon: "none"
							});
						}
					})
				}
			}

			// 去申请使用资产
			const toApply = () => {
				uni.navigateTo({
					url: '/pages/assets/assetApply/assetApply',
				})
			}

			// 签收
			const toSign = () => {
				uni.navigateTo({
					url: '/pages/assets/assetApply/inList',
				})
			}

			// 实施列表
			const toPut = () => {
				uni.navigateTo({
					url: '/pages/assets/assetApply/putList',
				})
			}

			// 扫码签收 
			const qrSign = () => {
				uni.navigateTo({
					url: `/pages/qrCode/qrCode?tip=扫码失败？返回申请列表&successUrl=/pages/assets/assetApply/qrSign&clickTipUrl=/pages/assets/assetApply/index`,
				})
				// uni.scanCode({
				// 	success: function(res) {
				// 		console.log(res)
				// 		if (res.scanType === 'QR_CODE') {
				// 			//二维码扫描
				// 			uni.navigateTo({
				// 				url: '/pages/assets/assetApply/qrSign?qrCode=' + res
				// 					.result,
				// 			})
				// 		}
				// 	}
				// });
			}

			// 去资产申请详情
			const toDetail = (assetApplyId) => {
				uni.navigateTo({
					url: '/pages/assets/assetApply/assetApplyDetaile?assetApplyId=' + assetApplyId,
				})
			}

			return {
				showLoadMore,
				loadMoreText,
				assetsList,
				statusChange,
				searchParams,
				scan,
				currentTab,
				tabItems,
				onClickItem,
				positionChange,
				positionPopup,
				statusPopup,
				assetStatusOpts,
				assetTypeOpts,
				toDel,
				toApply,
				toSign,
				toPut,
				qrSign,
				toDetail,

				receive,
				toSearch,
				toShow,

				positionList,
				tipContent,
				messageTip,
				handleShowOrHideTip
			}
		},
	})
</script>

<style scoped lang="scss">
	.assetMain {
		background-color: #eee;
		font-size: 14px;
	}

	.assetNav {
		display: flex;
		flex-wrap: row nowrap;
		justify-content: space-around;
		padding: 15px;
		background-color: #fff;
	}

	.assetList {
		padding: 30px 15px 80px 15px;
	}

	.itemHead {
		position: relative;
		background-color: aliceblue;

	}

	.assetListItem {
		margin-top: 15px;
		background-color: #fff;
		border-radius: 5px;
	}

	.itemHeadTitle {
		text-indent: 15px;
		height: 45px;
		line-height: 45px;
		font-weight: bold;
		color: #333;
		display: flex;
		width: 80%;
	}

	.applyNum {
		color: green;
		font-weight: normal;
		flex: 1;
		overflow-x: scroll;
		// overflow: hidden;
		white-space: nowrap;
		// text-overflow: ellipsis;

		// overflow: hidden;
		// text-overflow: ellipsis;
		// display:-webkit-box;
		// -webkit-line-clamp: 1;
		// -webkit-box-orient: vertical;
	}

	.itemHeadState {
		position: absolute;
		right: 0;
		top: 10px;
		display: inline-block;
		background-color: burlywood;
		font-size: 11px;
		color: #fff;
		padding: 5px 12px;
		border-radius: 15px 0 0 15px;
	}

	.itemContent {
		font-size: 16px;
		box-sizing: border-box;
		padding: 15px 10px;
		border-bottom: 1px solid #eee;
		display: flex;
		flex-wrap: row nowrap;
	}

	.itemContent>view:nth-child(1) {
		width: 50%;
		padding-left: 15px;
		color: #333;
	}

	.itemContent>view:nth-child(1)>view {
		padding: 3px 0;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		cursor: pointer;
	}

	.itemContent>view:nth-child(2) {
		width: 35%;
		padding-left: 15px;
		color: #333;
	}

	.itemContent>view:nth-child(2)>view {
		padding: 3px 0;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		cursor: pointer;
	}

	.itemContent>view:nth-child(3) {
		width: 15%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.itemHand {
		padding: 15px;
		display: flex;
		justify-content: flex-end;
	}

	.itemHand>view {
		padding: 4px 18px;
		margin-right: 14px;
	}

	.buttons {
		padding: 10px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		font-size: 15px;
	}

	// .buttons * {
	// 	font-size: 15px;
	// }
</style>
